<template>
  <div class="icon-box w-full h-full">
    <div
      class="icon-container"
      :class="hover ? 'pause' : props.editing ? 'play' : 'pause '"
    >
      <div
        class="flex-center h-[20px] w-[20px] rounded-[50%] bg-white absolute top-[-6px] left-[-6px] z-deleteIcon"
        :class="props.editing ? '' : '!hidden'"
        @click.stop="remove(data)"
      >
        <span
          class="iconfont icon-yichu text-[12px] text-black/40 transition-colors group-hover:text-opacity-60"
        ></span>
      </div>
      <div
        class="icon-home flex items-center justify-center overflow-hidden bg-cover cursor-pointer icon-drag"
        :data-dropid="data.id"
        :data-type="data.type"
        :style="{ ...bg }"
        @click="click"
      >
        <p
          v-if="data.bgText"
          class="text-[24px] m-0 shrink-0 text-white whitespace-nowrap text-center text-color-white pointer-events-none"
        >
          {{ data.bgText.slice(0, 2) }}
        </p>
      </div>
    </div>
    <div
      class="select-none icon-title overflow text-white text-center w-[102px] max-w-[102px] h-[30px] leading-[20px] pt-[8px] relative left-[-14px]"
    >
      {{ data?.name }}
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  computed,
  PropType,
  toRefs,
  reactive,
  watchEffect,
  ref,
  inject,
  Ref,
} from "vue";
import { IconChild } from "../api/types";

const draggingId = inject("draggingId") as Ref<string | null>;
const props = defineProps({
  nameVisible: {
    default: true,
    type: Boolean,
  },
  openWay: {
    default: "_blank",
    type: String,
  },
  data: {
    type: Object,
    default: () => ({}),
  },
  editing: {
    default: false,
    type: Boolean,
  },
});
const emits = defineEmits(["remove", "edit"]);
const remove = (item) => {
  emits("remove", item);
};

const hover = ref(false);
const data = ref(props.data);

watchEffect(() => {
  data.value = props.data;
});

const click = () => {
  if (props.editing) {
    // 跳到编辑页面
    emits("edit", data);
  } else {
    if (draggingId.value) {
      return;
    }
    window.open(data.value?.target, props.openWay);
  }
};

const bg = computed(() => {
  const d = data.value;
  return d?.bgType === "color"
    ? { backgroundColor: d?.bgColor }
    : { backgroundImage: `url(${d.bgImageUrl})` };
});
</script>
<style scoped lang="scss">
.icon-home {
  filter: drop-shadow(rgba(0, 0, 0, 0.05) 0 4px 12px);
  font-size: 38px;
  height: var(--icon-size);
  // transition: all 0.2s;
  width: var(--icon-size);
  line-height:var(--icon-size);
  border-radius: var(--icon-rounded, 20px);
  -webkit-user-drag: none;
}
.icon-container {
  transition-duration: 0.3s;
  -webkit-user-drag: none;
  // transform: translateY(0px);
}
.icon-container:hover {
  // animation-play-state: paused;
  animation: none;
  // translate: 0 -4px;
  transform: translateY(-4px);
}
.icon-title {
  font-size: var(--icon-font-size, 14px);
  -webkit-user-drag: none;
}

@keyframes shake {
  0% {
    rotate: 0deg;
  }
  20% {
    rotate: -2deg;
  }
  60% {
    rotate: 0deg;
  }
  80% {
    rotate: 2deg;
  }
  100% {
    rotate: 0deg;
  }
}
.play {
  animation: shake 0.3s infinite ease;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
}
.pause {
  animation-play-state: paused;
}
</style>
